<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <title>供应商管理系统</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/lib/layui-v2.5.5/css/layui.css" media="all">
  <link rel="stylesheet" href="/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
  <div class="layuimini-main">
    <fieldset class="table-search-fieldset">
      <legend>搜索信息</legend>
      <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">用户名称</label>
              <div class="layui-input-inline">
                <input type="text" name="userName" autocomplete="off" class="layui-input">
              </div>
            </div>

            <div class="layui-inline">
              <label class="layui-form-label">用户角色</label>
              <div class="layui-input-inline">
                <input type="text" name="roleName" autocomplete="off" class="layui-input" th:value="${userModel.role.roleName}">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">地址</label>
              <div class="layui-input-inline">
                <input type="text" name="address" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">出生日期</label>
              <div class="layui-input-inline" style="width: 190px;">
                <input type="text" name="beginDate" id="date1"  placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid">-</div>
              <div class="layui-input-inline" style="width: 190px;">
                <input type="text" name="endDate" id="date2"  placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
            </div>
          </div>
        </form>
      </div>
    </fieldset>

    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
        <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
      </div>
    </script>

    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

    <script type="text/html" id="currentTableBar">
      <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
    </script>
  </div>
</div>
<script src="/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script>
  var proTable;
  layui.use(['form', 'table','laydate'], function () {
    var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            laydate = layui.laydate;
    //日期
    laydate.render({
      elem: '#date1'
    });
    laydate.render({
      elem: '#date2'
    });

    proTable = table.render({
      elem: '#currentTableId',
      url: '/user/userIndex',
      toolbar: '#toolbarDemo',
      defaultToolbar: ['filter', 'exports', 'print', {
        title: '提示',
        layEvent: 'LAYTABLE_TIPS',
        icon: 'layui-icon-tips'
      }],
      cols: [[
        {type: "checkbox", width: 50},
        {field: 'id', width: 80, title: 'ID', sort: true},
        {field: 'userCode', width: 120, title: '用户编码'},
        {field: 'userName', width: 140, title: '用户名称'},
        {
          field: 'gender',
          width: 80,
          title: '性别',
          templet: function(d){
            // d 是当前行的数据对象
            return d.gender == 1 ? '男' : '女';
          }
        },
        {field: 'role',
          title: '用户角色',
          minWidth: 100,
          templet:function(d){
          return d.role ? d.role.roleName:''
          }},
        {field: 'phone', width: 130, title: '用户电话'},
        {field: 'address', width: 160, title: '家庭地址'},
        {field: 'birthday', width: 160, title: '出生日期',sort: true},
        {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
      ]],
      limits: [5, 10, 15, 20, 25, 50],
      limit: 5,
      page: true,
      skin: 'line',
    });
    //调用父级
    parent.parentTable(proTable);
    // 监听搜索操作
    form.on('submit(data-search-btn)', function (data) {
      //执行搜索重载
      table.reload('currentTableId', {
        page: {
          curr: 1
        }
        , where: data.field
      }, 'data');

      return false;
    });

    /**
     * toolbar监听事件
     */

    table.on('toolbar(currentTableFilter)', function (obj) {
      if (obj.event === 'add') {  // 监听添加操作
        parent.layer.open({
          title: '添加供应商',
          type: 2,
          shade: 0.2,
          maxmin: true,
          shadeClose: true,
          area: ['65%', '65%'],
          content: '/user/addOrEditUser.html',
        });

      } else if (obj.event === 'delete') {  // 监听删除操作
        var checkStatus = table.checkStatus('currentTableId'),data = checkStatus.data;
        var ids = [];
        $.each(data, function () {
          ids.push(this.id)
        })
        var idString = ids.join(',');
        parent.layer.confirm('确定删除选中的行吗？', function () {
          $.post("/pro/delPros", {ids: idString}, function (result) {
            parent.layer.alert(result.msg);
            if (result.code == 200) {
              parent.tab.reload();
              parent.layer.closeAll();
            }
          }, "json")
        });
      }
    });
    //监听表格复选框选择
    table.on('checkbox(currentTableFilter)', function (obj) {
      console.log(obj)
    });

    table.on('tool(currentTableFilter)', function (obj) {
      var data = obj.data;
      if (obj.event === 'edit') {
        var index = parent.layer.open({
          title: '编辑用户',
          type: 2,
          shade: 0.2,
          data: data,
          maxmin: true,
          shadeClose: true,
          area: ['65%', '65%'],
          content: '/user/addOrEditUser.html?id=' + data.id
        });
        return false;
      } else if (obj.event === 'delete') {
          parent.layer.confirm('确定删除该行吗？', function () {
            $.getJSON("/pro/delPro?id=" + data.id, function (result) {
              parent.layer.alert(result.msg);
              if (result.code == 200) {
                parent.tab.reload();
              }
            })
          })
        }
    });
  });
</script>
</body>
</html>